<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程设计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Gang Tao">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
    <!-- <link href="~/Content/css/style.css?v=4.1.0" rel="stylesheet"> -->

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- <script src="~/Content/js/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsPlumb/2.12.9/js/jsplumb.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jsPlumb/2.12.9/css/jsplumbtoolkit-defaults.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/mobile/layer.min.js"></script>
    <!-- <script src="~/Content/js/shui-framework.js" type="text/javascript"></script> --></script>
    <style type="text/css"> 
    .pageBox
    {
        margin:0;
        padding:0;
    }
    .menuBox
    {
        width:100px;
        float:left;
        height:600px;    
    }
    .menuItems
    {
         margin:8px;       
         z-index:999;
    }
    .flowBox
    {
       width: 100%;
       height:550px; 
       background-color:#ccc;
       position:absolute;
    }
     .mainBox
    {
       margin-left:100px;
       width: calc(100% - 100px);
       height:600px; 
       border-left:1px solid #e7eaec;
    }
    .flowBtnBox
    {
       width: 100%;
       height:50px; 
       padding:8px;
    }
    .nodeBox {
       position: absolute; 
       width: 200px; 
       background-color: transparent;
       
    }
    .nodeBox:hover{
       box-shadow:#66a6e0 0px 0px 12px 0px;
    }
    .flow-node-header {
        background-color: #66a6e0;
        height: 25px;
        cursor: pointer;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .flow-node-header a {
        text-decoration: none;
        line-height: 25px;
        vertical-align: middle;
    }
    .flow-node-body {
        background-color: beige;
        background-color: white;
        text-align: center;
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    .flow-node-drag {
        margin-left:6px;
        color:#000;
    }
    .flow-node-operate{
        position: absolute;
        top: 0px;
        right: 0px;
        line-height: 25px;    
    }
    .labelClass {
        background-color: white;
        padding: 5px;
        opacity: 0.7;
        border: 1px solid #346789;
        border-radius: 2px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    </style>
</head>
<body>
  <div class="pageBox">
    <div class="menuBox">
        <div class="menuItems">
            <div data_id="startNode" data_nodeTypes="1" data_name="开始节点" class="btn btn-primary" >开始节点</div>
        </div>
         <div class="menuItems">
            <div data_id="startNode" data_nodeTypes="2" data_name="流程节点" class="btn btn-primary">流程节点</div>
        </div>
        <div class="menuItems">
            <div data_id="endNode" data_nodeTypes="3" data_name="结束节点" class="btn btn-primary" >结束节点</div>
        </div>
    </div>
    <div class="mainBox">
       <div class="flowBtnBox">
          <div class="btn btn-white" onclick="BtnSave()" >保存</div>
          <div class="btn btn-white" onclick="BtnNodeInfo()" >流程信息</div>
          <div class="btn btn-white" onclick="BtnWorkflowList()" >流程列表</div>        
          <div class="btn btn-white" onclick="BtnWorkflowExport()" >导出</div>        
          <div class="btn btn-white" onclick="BtnWorkflowImport()" >导入</div>        
       </div>
       <div id="flowBox" class="flowBox"></div>
    </div>
   
  </div>
<script>
    var workflowInfo = {};
    var dataNodeList = [];
    var dataLineList = [];
    var loadEasyFlowFinish = false;
    var jsplumbSetting = {
        // 动态锚点、位置自适应
        Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
        Container: 'flowBox',
        // 连线的样式 StateMachine、Flowchart
        Connector: 'Flowchart',
        // 鼠标不能拖动删除线
        ConnectionsDetachable: false,
        // 删除线的时候节点不删除
        DeleteEndpointsOnDetach: false,
        // 连线的端点
        // Endpoint: ["Dot", {radius: 5}],
        Endpoint: ["Rectangle", {height: 10, width: 10}],
        // 线端点的样式
        EndpointStyle: { fill: 'rgba(255,255,255,0)', outlineWidth: 1},
        LogEnabled: true,//是否打开jsPlumb的内部日志记录
        // 绘制线
        PaintStyle: { stroke: 'black', strokeWidth: 3 },
        // 绘制箭头
        Overlays: [['Arrow', {width: 12, length: 12, location: 1}]],
        RenderMode: "svg"
    };
    // jsplumb连接参数
    var jsplumbConnectOptions = {
        isSource: true,
        isTarget: true,
        // 动态锚点、提供了4个方向 Continuous、AutoDefault
        anchor: "Continuous"
    };
    var jsplumbSourceOptions = {
        /*"span"表示标签，".className"表示类，"#id"表示元素id*/
        filter: ".flow-node-drag",
        filterExclude: false,
        anchor: "Continuous",
        allowLoopback: false
    };
    var jsplumbTargetOptions = {
        /*"span"表示标签，".className"表示类，"#id"表示元素id*/
        filter: ".flow-node-drag",
        filterExclude: false,
        anchor: "Continuous",
        allowLoopback: false
    };
 
    $(function () {
        $(".menuItems").draggable({
            helper: 'clone',
            scope: 'ss'
        })
        $("#flowBox").droppable({
            scope: 'ss',
            drop: function (event, ui) {
                var $btn = $(ui.draggable[0]).find(".btn");
                var node = {};
                node.id = "node" + Math.random().toString(36).substr(3, 10);
                node.name = $btn.attr("data_name");
                node.nodeTypes = $btn.attr("data_nodeTypes");
                node.userType = 1;
                node.pushType = 1;
                node.show = true;
                node.left = (ui.position.left - 100) + "px";
                node.top = (ui.position.top - 50) + "px";
                addNode(node);
            }
        })
 
        jsPlumb.ready(main);
 
        function main() {
            jsPlumb.importDefaults(jsplumbSetting);
            jsPlumb.setContainer('flowBox');
            jsPlumb.setSuspendDrawing(false, true);
 
            if (!!GetQuery('id')) {
                var id = GetQuery('id');
                getAjax("/WorkflowModule/Design/GetWorkflowInfo?id=" + id, {}, function (rs) {
                    var rs = eval("(" + rs + ")");
                    if (rs.status == "ok") {
                        workflowInfo = rs.data;
                        dataNodeList = rs.data.WrokflowNodeList;
                        dataLineList = rs.data.WrokflowLinesList;
                        loadEasyFlow();
                    }
                });
            }
 
            // 单点击了连接线,
            jsPlumb.bind('click', function (conn, originalEvent) {
                console.log(conn);
                var _layer = Getlayer();
                _layer.open({
                    btn: ['保存', '删除'], //按钮
                    yes: function (index, layero) {
                        var fromData = parent.$("#layui-layer-iframe" + index)[0].contentWindow.GetData();
                        conn.setLabel({
                            label: fromData.name,
                            cssClass: 'labelClass'
                        });
                        for (var i = 0; i < dataLineList.length; i++) {
                            if (dataLineList[i].conn_id == conn.id) {
                                dataLineList[i].labelName = fromData.name;
                                dataLineList[i].WrokflowLineConditList = fromData.WrokflowLineConditList;
                                dataLineList[i].labelCss = 'labelClass';
                                break;
                            }
                        };
                        _layer.close(index);
                    }, btn2: function (index, layero) {
                        jsPlumb.deleteConnection(conn)
                        _layer.close(index);
                    },
                    type: 2,
                    title: '连线信息',
                    area: ['650px', '540px'],
                    shadeClose: true, //开启遮罩关闭
                    content: '/WorkflowModule/Design/LinesForm',
                    success: function (layero, index) {
                        var data = {};
                        for (var i = 0; i < dataLineList.length; i++) {
                            if (dataLineList[i].conn_id == conn.id) {
                                data.name = dataLineList[i].labelName;
                                data.WrokflowLineConditList = dataLineList[i].WrokflowLineConditList;
                                break;
                            }
                        }
                        data.condition = [];
                        parent.$("#layui-layer-iframe" + index)[0].contentWindow.SetData(data);
                    }
                });
            });
            // 连线
            jsPlumb.bind("connection", function (evt) {
                var from = evt.source.id;
                var to = evt.target.id;
                if (loadEasyFlowFinish) {
                    dataLineList.push({ from: from, to: to })
                }
            });
            // 删除连线回调
            jsPlumb.bind("connectionDetached", function (evt) {
                deleteLine(evt.sourceId, evt.targetId)
            })
        }
    })
    // 删除线
    function deleteLine(from,to) {
        dataLineList = dataLineList.filter(function (line) {
            if (line.from == from && line.to == to) {
                return false
            }
            return true
        })
    }
    function loadEasyFlow() {
        $("#flowBox").empty();
        // 初始化节点
        for (var i = 0; i < dataNodeList.length; i++) {
            var node = dataNodeList[i];
            drawNode(node);
            // 设置源点，可以拖出线连接其他节点
            jsPlumb.makeSource(node.id, jsplumbSourceOptions);
            // 设置目标点，其他源点拖出的线可以连接该节点
            jsPlumb.makeTarget(node.id, jsplumbTargetOptions);
 
            jsPlumb.draggable(node.id, {
                containment: 'parent'
            });
        }
 
        // 初始化连线
        for (var i = 0; i < dataLineList.length; i++) {
            var line = dataLineList[i];
            var curline = jsPlumb.connect({
                source: line.from,
                target: line.to
            }, jsplumbConnectOptions);
            dataLineList[i].conn_id = curline.id;
            if (line.labelName != "") {
                curline.setLabel({
                    label: line.labelName,
                    cssClass: line.labelCss
                })
            }
        }
        setInterval(function () {
            loadEasyFlowFinish = true;
        }, 500);
   }
   function changeNodeSite(e) {
        var data = {};
        data.nodeId = $(e).attr("id");
        data.left = $(e).css("left");
        data.top = $(e).css("top");
        for (var i = 0; i < dataNodeList.length; i++) {
            var node = dataNodeList[i];
            if (node.id == data.nodeId) {
                node.left = data.left;
                node.top = data.top;
            }
        }
    }
    function onmouseoverNode(e) {
        $(e).find(".flow-node-operate").show();
    }
    function onmouseoutNode(e) {
        $(e).find(".flow-node-operate").hide();
    }
    function editNode(e) {
        var _layer = Getlayer();
        var currentNode = $(e).parents(".nodeBox");
        var nodeId = currentNode.attr("id");
        _layer.open({
            btn: ['确认', '取消'], //按钮
            yes: function (index, layero) {
                var PostData = parent.$("#layui-layer-iframe" + index)[0].contentWindow.GetWebControls("#form1");
 
                for (var i = 0; i < dataNodeList.length; i++) {
                    if (dataNodeList[i].id == nodeId) {
                        dataNodeList[i].name = PostData.name;
                        dataNodeList[i].nodeTypes = PostData.nodeTypes;
                        dataNodeList[i].userType = PostData.userType;
                        dataNodeList[i].userid = PostData.userid;
                        dataNodeList[i].userSql = PostData.userSql;
                        dataNodeList[i].userSqlParam = PostData.userSqlParam;
                        dataNodeList[i].pushType = PostData.pushType;
                        dataNodeList[i].pushContent = PostData.pushContent;
                        dataNodeList[i].pushContentParam = PostData.pushContentParam;
                        dataNodeList[i].viewUrl = PostData.viewUrl;
                        dataNodeList[i].dataBase = PostData.dataBase;
                        dataNodeList[i].weChatViewUrl = PostData.weChatViewUrl;
                        dataNodeList[i].appViewUrl = PostData.appViewUrl;
                        currentNode.find(".flow-node-body").html(PostData.name);
                        break;
                    }
                }
                _layer.close(index);
            }, btn2: function (index, layero) {
                _layer.close(index);
            },
            type: 2,
            title: '节点信息',
            area: ['650px', '540px'],
            shadeClose: true, //开启遮罩关闭
            content: '/WorkflowModule/Design/NodeForm?Id=' + nodeId,
            success: function (layero, index) {
                var data = {};
                for (var i = 0; i < dataNodeList.length; i++) {
                    if (dataNodeList[i].id == nodeId) {
                        data.name = dataNodeList[i].name;
                        data.nodeTypes = dataNodeList[i].nodeTypes;
                        data.userType = dataNodeList[i].userType;
                        data.userid = dataNodeList[i].userid;
                        data.userSql = dataNodeList[i].userSql;
                        data.userSqlParam = dataNodeList[i].userSqlParam;
                        data.pushType = dataNodeList[i].pushType;
                        data.pushContent = dataNodeList[i].pushContent;
                        data.pushContent = dataNodeList[i].pushContent;
                        data.pushContentParam = dataNodeList[i].pushContentParam;
                        data.viewUrl = dataNodeList[i].viewUrl;
                        data.dataBase = dataNodeList[i].dataBase;
                        data.weChatViewUrl = dataNodeList[i].weChatViewUrl;
                        data.appViewUrl = dataNodeList[i].appViewUrl; 
                        break;
                    }
                }
                var PostData = parent.$("#layui-layer-iframe" + index)[0].contentWindow.SetData(data);
            }
        });
    }
    function deleteNode(e) {
        var _layer = Getlayer();
        _layer.confirm('确定删除该节点吗？', {
            btn: ['确认', '取消'] //按钮
        }, function (index) {
            var nodeId = $(e).parents(".nodeBox").attr("id");
            dataNodeList = dataNodeList.filter(function (node) {
                if (node.id === nodeId) {
                    // 伪删除，将节点隐藏，否则会导致位置错位
                    node.show = false;
                    $("#" + nodeId).hide();
                }
                return true
            });
            setInterval(function () {
                jsPlumb.removeAllEndpoints(nodeId);
            }, 50);
            _layer.close(index);
 
        }, function () {
 
        });
    }
    function drawNode(node) {
        var node = ['<div id="' + node.id + '" class="nodeBox" onmouseup="changeNodeSite(this)" onmouseover="onmouseoverNode(this)" onmouseout="onmouseoutNode(this)" style="left:' + node.left + ';top:' + node.top + '">',
        	'<div class="flow-node-header">',
		        '<span class="fa fa-bars flow-node-drag"></span>',
		        '<div class="flow-node-operate" style="display:none;">',
			        '<span onclick="editNode(this)" >编辑</span>&nbsp;',
                    '<span onclick="deleteNode(this)" >删除</span>&nbsp;',
		        '</div>',
	        '</div>',
	        '<div class="flow-node-body">' + node.name + '</div>',
        '</div>'].join('');
        $("#flowBox").append(node);
    }
    function addNode(node) {
        dataNodeList.push(node);
        drawNode(node);
        // 设置源点，可以拖出线连接其他节点
        jsPlumb.makeSource(node.id, jsplumbSourceOptions);
        // 设置目标点，其他源点拖出的线可以连接该节点
        jsPlumb.makeTarget(node.id, jsplumbTargetOptions);
 
        jsPlumb.draggable(node.id, {
            containment: 'parent'
        });
    }
   
    function BtnNodeInfo() {
        var _layer = Getlayer();
        _layer.open({
            btn: ['保存', '取消'], //按钮
            yes: function (index, layero) {
                var PostData = parent.$("#layui-layer-iframe" + index)[0].contentWindow.GetWebControls("#form1");
                workflowInfo = PostData;
                _layer.close(index);
            }, btn2: function (index, layero) {
                _layer.close(index);
            },
            type: 2,
            title: '流程信息',
            area: ['650px', '540px'],
            shadeClose: true, //开启遮罩关闭
            content: '/WorkflowModule/Design/WorkflowInfo',
            success: function (layero, index) {
                parent.$("#layui-layer-iframe" + index)[0].contentWindow.SetData(workflowInfo);
            }
        })
    }
 
    function BtnSave() {
        var _layer = Getlayer();
        var postData = {};
        postData = workflowInfo;
        postData.WrokflowNodeList = dataNodeList;
        postData.WrokflowLinesList = dataLineList;
        getAjax("/WorkflowModule/Design/WorkflowSave", "data=" + JSON.stringify(postData), function (rs) {
            var rs = eval("(" + rs + ")");
            if (rs.status == "ok") {
                _layer.msg("保存成功")
            } else {
                _layer.msg("保存失败")
            }
        });
    }
    function BtnWorkflowList() {
        parent.openTab('/WorkflowModule/Design/WorkflowList', '流程列表');
    }
    function BtnWorkflowExport() {
        var data = {}
        data.workflowInfo = workflowInfo;
        data.dataNodeList = dataNodeList;
        data.dataLineList = dataLineList;
        var _layer = Getlayer();
        _layer.open({
            type: 1,
            title: '流程信息',
            area: ['420px', '280px'], //宽高
            content: '<textarea class="form-control" id="workflowInfoText" name="workflowInfoText" rows="10">' + JSON.stringify(data) + '</textarea>'
        });
    }
    function BtnWorkflowImport() {
        var _layer = Getlayer();
        _layer.open({
            btn: ['保存', '取消'], //按钮
            yes: function (index, layero) {
                var workflowInfoText = parent.$("#layui-layer" + index).find("#workflowInfoText").val();
                var data = eval("(" + workflowInfoText + ")");
 
                //重置ID
                if (!!GetQuery('id')) {
                    data.workflowInfo.id = GetQuery('id');
                } else {
                    data.workflowInfo.id = "";
                }
               
               
                workflowInfo = data.workflowInfo;
                dataNodeList = data.dataNodeList;
                dataLineList = data.dataLineList;
                loadEasyFlowFinish = false;
                loadEasyFlow();
                _layer.close(index);
            }, btn2: function (index, layero) {
                _layer.close(index);
            },
            type: 1,
            title: '流程信息',
            shadeClose: true, //开启遮罩关闭
            area: ['420px', '310px'], //宽高
            content: '<textarea class="form-control" id="workflowInfoText" name="workflowInfoText" rows="10"></textarea>'
        })
    }
</script>
</body>
</html>